import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Select, Input, Checkbox, Space, Form } from 'ant-design-vue';
import { getModulesAll } from '/@/api/system/system';

const FormItemRest = Form.ItemRest;

export const showHideOptions = [
  {
    value: '1',
    label: '显示',
  },
  {
    value: '0',
    label: '隐藏',
  },
];

export const isColCheckboxShowOptions = [
  {
    value: true,
    label: '显示',
  },
  {
    value: false,
    label: '隐藏',
  },
];
export interface State {
  isSpinning: boolean;
  loading: boolean;
}
export const formSchema: FormSchema[] = [
  {
    field: 'divider-basic',
    component: 'Divider',
    label: '基础信息',
    colProps: {
      span: 24,
    },
    componentProps: {
      orientationMargin: 15,
    },
  },
  {
    field: 'name',
    label: '模块名称',
    component: 'Input',
    required: true,
    colProps: { span: 8 },
  },
  {
    field: 'isUse',
    label: '模块状态',
    component: 'Select',
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          value: 1,
          label: '启用',
        },
        {
          value: 0,
          label: '停用',
        },
      ],
    },
  },
  {
    field: 'code',
    label: '模块编码',
    component: 'Input',
    colProps: { span: 8 },
    render: ({ model, field }) => {
      return h('div', {}, model[field]);
    },
  },
  {
    field: 'description',
    label: '模块描述',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'isEditInplace',
    label: '在位编辑',
    component: 'Select',
    helpMessage: '在位编辑不支持相关事件脚本，且从模块暂不支持在位编辑',
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          value: 1,
          label: '是',
        },
        {
          value: 0,
          label: '否',
        },
      ],
    },
  },
  {
    field: 'msgProp',
    label: '事件提醒',
    component: 'Input',
    colProps: { span: 8 },
    slot: 'msgProp',
  },
  {
    field: 'opStyle',
    label: '操作方式',
    component: 'Select',
    renderComponentContent: '方式',
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          value: 1,
          label: '选项卡',
        },
        {
          value: 0,
          label: '抽屉',
        },
      ],
    },
    //ifShow:({values} ) => values.opStyle === 2,//页面风格为2的
  },
  {
    field: 'tabTitle',
    label: '标题',
    component: 'Input',
    colProps: { span: 8 },
    helpMessage: '选项卡标题，如：{$xmmc}-',
    ifShow: ({ values }) => values.opStyle == 1,
    componentProps: {
      placehoder: '选项卡标题，如：{$xmmc}-',
    },
  },
  {
    field: 'divider-btn',
    component: 'Divider',
    label: '按钮信息',
    colProps: {
      span: 24,
    },
    componentProps: {
      orientationMargin: 15,
    },
  },
  {
    field: 'btnDisplayShow',
    label: '查看按钮',
    component: 'Select',
    colProps: { span: 8 },
    slot: 'btnDisplayShow',
  },
  {
    field: 'btnAddShow',
    label: '添加按钮',
    component: 'Select',
    colProps: { span: 8 },
    slot: 'btnAddShow',
  },
  {
    field: 'btnEditShow',
    label: '编辑按钮',
    component: 'Select',
    colProps: { span: 8 },
    slot: 'btnEditShow',
  },
  {
    field: 'btnFlowShow',
    label: '流程按钮',
    component: 'Select',
    colProps: { span: 8 },
    slot: 'btnFlowShow',
  },
  {
    field: 'btnLogShow',
    label: '日志按钮',
    component: 'Select',
    colProps: { span: 8 },
    defaultValue: '1',
    componentProps: {
      options: showHideOptions,
    },
  },
  {
    field: 'btnDelShow',
    label: '删除按钮',
    component: 'Select',
    colProps: { span: 8 },
    slot: 'btnDelShow',
  },
  {
    field: 'divider-view',
    component: 'Divider',
    label: '视图信息',
    colProps: {
      span: 24,
    },
    componentProps: {
      orientationMargin: 15,
    },
  },
  {
    field: 'viewShow',
    label: '详情视图',
    component: 'Select',
    defaultValue: '0',
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          value: '0',
          label: '默认',
        },
        {
          value: '1000002',
          label: '树形视图',
        },
        {
          value: '1000001',
          label: '自定义',
        },
      ],
    },
  },
  {
    field: 'urlShow',
    label: '列表页地址',
    component: 'Input',
    colProps: { span: 8 },
    helpMessage: '如果页面是定制的，请输入显示页地址',
    ifShow: ({ values }) => values.viewShow == '1000001',
  },
  {
    field: 'fieldTreeShow',
    label: '树形字段',
    component: 'ApiTreeSelect',
    colProps: { span: 8 },
    helpMessage: '树形视图时，左侧树形结构对应的基础数据宏控件字段',
    ifShow: ({ values }) => values.viewShow == '1000002',
    slot: 'fieldTreeShow',
  },
  {
    field: 'moduleCodeLog',
    label: '日志模块',
    component: 'Select',
    colProps: { span: 8 },
    defaultValue: 'module_log',
    componentProps: {
      options: [
        {
          value: 'module_log',
          label: '模块日志',
        },
      ],
    },
  },
  {
    field: 'viewEdit',
    label: '编辑视图',
    component: 'Select',
    colProps: { span: 8 },
    defaultValue: '0',
    componentProps: {
      options: [
        {
          value: '0',
          label: '默认',
        },
        {
          value: '1000000',
          label: '自定义',
        },
      ],
    },
    ifShow: false,
  },
  {
    field: 'urlEdit',
    label: '编辑页地址',
    component: 'Input',
    colProps: { span: 8 },
    helpMessage: '如果页面是定制的，请输入列表页地址',
    ifShow: ({ values }) => values.viewEdit == '1000000',
  },
  {
    field: 'exportWordView',
    label: '生成视图',
    component: 'Select',
    colProps: { span: 8 },
    helpMessage: '生成word时指定视图',
    defaultValue: '-1',
    componentProps: {
      options: [
        {
          value: '-1',
          label: '根据表单',
        },
      ],
    },
  },
  {
    field: 'viewList',
    label: '列表视图',
    component: 'Select',
    colProps: { span: 8 },
    defaultValue: '0',
    componentProps: {
      options: [
        {
          value: '0',
          label: '默认',
        },
        {
          value: '8',
          label: '平铺列表',
        },
        {
          value: '9',
          label: '平铺列表/日历视图',
        },
        {
          value: '4',
          label: '树形（基础数据）',
        },
        {
          value: '7',
          label: '树形（部门）',
        },
        {
          value: '5',
          label: '日历视图',
        },
        {
          value: '6',
          label: '日历视图/列表',
        },
        {
          value: '10',
          label: '宫格视图',
        },
        {
          value: '3',
          label: '自定义',
        },
      ],
    },
  },
  {
    field: 'gridShowFieldSelect',
    label: '显示字段',
    component: 'Input',
    colProps: { span: 8 },
    slot: 'gridShowFieldSelect',
    ifShow: ({ values }) => values.viewList == '10',
  },
  {
    field: 'dateField',
    label: '日期字段',
    component: 'Input',
    colProps: { span: 12 },
    slot: 'dateField',
    ifShow: ({ values }) => values.viewList == '5' || values.viewList == '6',
  },
  {
    field: 'showField',
    label: '显示字段',
    component: 'Input',
    colProps: { span: 12 },
    slot: 'showField',
    ifShow: ({ values }) => values.viewList == '5' || values.viewList == '6',
  },
  {
    field: 'urlList',
    label: '列表页地址',
    component: 'Input',
    colProps: { span: 8 },
    helpMessage: '如果页面是定制的，请输入列表页地址',
    ifShow: ({ values }) => values.viewList == '3',
  },
  {
    field: 'fieldTreeList',
    label: '树形字段',
    component: 'ApiTreeSelect',
    colProps: { span: 8 },
    helpMessage: '树形视图时，左侧树形结构对应的基础数据宏控件字段',
    ifShow: ({ values }) => values.viewList == '4',
    slot: 'fieldTreeList',
  },
  {
    field: 'divider-other',
    component: 'Divider',
    label: '其它信息',
    colProps: {
      span: 24,
    },
    componentProps: {
      orientationMargin: 15,
    },
  },
  {
    field: 'isAutoHeight',
    label: '列表高度',
    component: 'Checkbox',
    colProps: { span: 8 },
    renderComponentContent: '自适应',
  },
  {
    field: 'isColCheckboxShow',
    label: '复选框列',
    component: 'Select',
    colProps: { span: 8 },
    slot: 'isColCheckboxShow',
    // componentProps: {
    //   options: [
    //     {
    //       value: true,
    //       label: '显示',
    //     },
    //     {
    //       value: false,
    //       label: '隐藏',
    //     },
    //   ],
    // },
  },
  {
    field: 'isColOperateShow',
    label: '操作列',
    component: 'Select',
    colProps: { span: 8 },
    render: ({ model, field }) => {
      return h(FormItemRest, null, [
        h(
          'div',
          {
            style: 'width:100%;display:flex;gap:10px',
          },
          [
            h(Select, {
              value: model[field],
              style: 'width:50%',
              placeholder: '请选择',
              options: [
                {
                  value: true,
                  label: '显示',
                },
                {
                  value: false,
                  label: '隐藏',
                },
              ],
              onChange: (value: string) => {
                model[field] = value;
              },
            }),
            h(Select, {
              value: model['isColOperateTextShow'],
              title: '隐藏文字后，操作列中仅显示图标',
              style: 'width:50%',
              placeholder: '请选择',
              options: [
                {
                  value: true,
                  label: '显示文字',
                },
                {
                  value: false,
                  label: '隐藏文字',
                },
              ],
              onChange: (value: string) => {
                model['isColOperateTextShow'] = value;
              },
            }),
          ],
        ),
      ]);
    },
  },
  {
    field: 'isColOperateTextShow',
    label: '',
    component: 'Select',
    colProps: { span: 8 },
    show: false,
  },
  {
    field: 'isExpand',
    label: '行展开',
    component: 'Checkbox',
    colProps: { span: 8 },
    helpMessage: '嵌套表格可以在列表中展开',
  },
  {
    field: 'otherMultiOrder',
    label: '映射字段',
    component: 'Checkbox',
    colProps: { span: 8 },
    helpMessage: '单重映射字段有多条记录时按ID号排序方式',
    render: ({ model, field }) => {
      return h(FormItemRest, null, [
        h(
          'div',
          {
            style: 'width:100%;display:flex;gap:10px;align-items:center',
          },
          [
            h('span', {}, '按'),
            h(Select, {
              value: model[field],
              style: 'flex:1',
              options: [
                {
                  value: 1,
                  label: '升序',
                },
                {
                  value: 0,
                  label: '降序',
                },
              ],
              onChange: (value: string) => {
                model[field] = value;
              },
            }),
            h('span', {}, '排序'),
          ],
        ),
      ]);
    },
  },
  {
    field: 'otherMultiWs',
    label: '分隔符',
    component: 'Input',
    colProps: { span: 8 },
    helpMessage: '单重映射字段有多条记录时的分隔符，为空时默认分隔符为半角逗号',
  },
  {
    field: 'zipName',
    label: '打包',
    component: 'Input',
    colProps: { span: 8 },
    render: ({ model, field }) => {
      return h(FormItemRest, null, [
        h(
          'div',
          {
            style: 'width:100%;display:flex;gap:10px;align-items:center',
          },
          [
            h('span', {}, '文件名'),
            h(Input, {
              title: '格式{$字段名}',
              value: model[field],
              style: 'flex:1',
              onChange: (e) => {
                model[field] = e.target.value;
              },
            }),
            h(
              Checkbox,
              {
                title: '勾选后可以将表单内容导出成word文件',
                checked: model['zipOnlyAttachment'],
                onChange: (e) => {
                  model['zipOnlyAttachment'] = e.target.value;
                },
              },
              '仅附件',
            ),
          ],
        ),
      ]);
    },
  },
  {
    field: 'zipOnlyAttachment',
    label: '勾选后可以将表单内容导出成word文件',
    component: 'Checkbox',
    colProps: { span: 8 },
    show: false,
  },
  {
    field: 'exportFormat',
    label: '导出格式',
    component: 'Select',
    colProps: { span: 8 },
    helpMessage: '指定导出Excel的格式',
    render: ({ model, field }) => {
      return h(FormItemRest, null, [
        h(
          'div',
          {
            style: 'width:100%;display:flex;gap:10px;align-items:center',
          },
          [
            h('span', {}, '按'),
            h(Select, {
              value: model[field],
              style: 'flex:1',
              options: [
                {
                  value: 0,
                  label: '按系统配置',
                },
                {
                  value: 1,
                  label: 'xls',
                },
                {
                  value: 2,
                  label: 'xls(xml格式快速导出)',
                },
              ],
              onChange: (value: string) => {
                model[field] = value;
              },
            }),
          ],
        ),
      ]);
    },
  },
  {
    field: 'exportColSize',
    label: '选择列导出',
    component: 'Input',
    colProps: { span: 8 },
    slot: 'exportColSize',
  },
  {
    field: 'isPagination',
    label: '显示页码',
    component: 'Select',
    defaultValue: true,
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          value: true,
          label: '是',
        },
        {
          value: false,
          label: '否',
        },
      ],
    },
  },
  {
    field: 'pageSize',
    label: '每页条数',
    component: 'Select',
    defaultValue: 20,
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          value: 20,
          label: '20',
        },
        {
          value: 50,
          label: '50',
        },
        {
          value: 80,
          label: '80',
        },
        {
          value: 100,
          label: '100',
        },
        {
          value: 200,
          label: '200',
        },
      ],
    },
  },
  {
    field: 'isReplyEnabled',
    label: '启用回复',
    component: 'Checkbox',
    colProps: { span: 8 },
    renderComponentContent: '回复',
  },
  {
    field: 'replyModule',
    label: '回复模块',
    component: 'ApiSelect',
    colProps: { span: 8 },
    componentProps: {
      api: getModulesAll,
      params: {},
      // resultField: 'list',
      optionFilterProp: 'name',
      showSearch: true,
      fieldNames: {
        label: 'name',
        key: 'code',
        value: 'code',
      },
    },
  },
  {
    field: 'likeMode',
    label: '点赞',
    component: 'Select',
    defaultValue: 0,
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          value: 0,
          label: '无',
        },
        {
          value: 1,
          label: '爱心',
        },
        {
          value: 2,
          label: '好中差',
        },
      ],
    },
  },
];

export const setFormData = (form) => {
  return {
    code: form.code,
    formCode: form.formCode,
    name: form.name,
    isUse: form.isUse,
    description: form.description,
    is_edit_inplace: form.isEditInplace,
    opStyle: form.opStyle,
    tabTitle: form.tabTitle,
    btn_display_show: form.btnDisplayShow,
    btnDisplayName: form.btnDisplayName,
    btnDisplayCond: form.btnDisplayCond,
    // '<items><item id="0.37407078229610047"><firstBracket>(</firstBracket><fieldName>bcghje</fieldName><name>comb_field</name><operator>&gt;=</operator><value>{$curUserDept}</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>9</fieldType></item></items>',
    btn_add_show: form.btnAddShow,
    btnAddName: form.btnAddName,
    btnAddCond: form.btnAddCond,
    btn_edit_show: form.btnEditShow,
    btnEditName: form.btnEditName,
    btnEditCond: form.btnEditCond,
    // '<items><item id="0.43180720385305205"><firstBracket>(</firstBracket><fieldName>jksj</fieldName><name>comb_field</name><operator>>=</operator><value>{$curMonth}</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>7</fieldType></item><item id="0.9758627082676841"><firstBracket>(</firstBracket><fieldName>jkdbh</fieldName><name>comb_field</name><operator>=</operator><value>001</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>0</fieldType></item></items>',
    btn_flow_show: form.btnFlowShow,
    btnFlowName: form.btnFlowName,
    btnFlowCond: form.btnFlowCond,
    // '<items><item id="0.4544396391824683"><firstBracket>(</firstBracket><fieldName>bcghje</fieldName><name>comb_field</name><operator>>=</operator><value>{$curUser}</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>9</fieldType></item><item id="0.580070702918881"><firstBracket>)</firstBracket><fieldName>cws_status</fieldName><name>comb_field</name><operator>=</operator><value>-5</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>1</fieldType></item><item id="0.004046664167443037"><firstBracket>(</firstBracket><fieldName>whje</fieldName><name>comb_field</name><operator>>=</operator><value>{$mainId}</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>9</fieldType></item><item id="0.045879080324547905"><firstBracket>(</firstBracket><fieldName>jkje</fieldName><name>comb_field</name><operator>>=</operator><value>{$curUserDept}</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>9</fieldType></item></items>',
    btn_log_show: form.btnLogShow,
    btn_del_show: form.btnDelShow,
    btnDelName: form.btnDelName,
    btnDelCond: form.btnDelCond,
    // '<items><item id="0.7681013571591058"><firstBracket>(</firstBracket><fieldName>bcghje</fieldName><name>comb_field</name><operator>>=</operator><value>{$curUserRole}</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>9</fieldType></item><item id="0.9728043601717675"><firstBracket>(</firstBracket><fieldName>bcghje</fieldName><name>comb_field</name><operator>>=</operator><value>{$curUser}</value><twoBracket>)</twoBracket><logical>and</logical><fieldType>9</fieldType></item></items>',
    view_show: form.viewShow,
    url_show: form.urlShow,
    field_tree_show: form.fieldTreeShow,
    module_code_log: form.moduleCodeLog,
    view_edit: form.viewEdit,
    url_edit: form.urlEdit,
    exportWordView: form.exportWordView,
    view_list: form.viewList,
    url_list: form.urlList,
    field_tree_list: form.fieldTreeList,
    module_tree_basic: form.moduleTreeBasic,
    module_tree_field_code: form.moduleTreeFieldCode,
    module_tree_field_name: form.moduleTreeFieldName,
    is_auto_height: form.isAutoHeight,
    isColCheckboxShow: form.isColCheckboxShow,
    checkboxCond: form.checkboxCond,
    isColOperateShow: form.isColOperateShow,
    isColOperateTextShow: form.isColOperateTextShow,
    is_expand: form.isExpand,
    other_multi_order: form.otherMultiOrder,
    other_multi_ws: form.otherMultiWs,
    zipName: form.zipName,
    zipOnlyAttachment: form.zipOnlyAttachment,
    field_begin_date: form.fieldBeginDate,
    field_end_date: form.fieldEndDate,
    field_name: form.fieldName,
    field_desc: form.fieldDesc,
    field_label: form.fieldLabel,
    scale_default: form.scaleDefault,
    scale_min: form.scaleMin,
    scale_max: form.scaleMax,
    exportFormat: form.exportFormat,
    msgProp: form.msgProp,
    pageSize: form.pageSize,
    isPagination: form.isPagination,
    isReplyEnabled: form.isReplyEnabled,
    replyModule: form.replyModule,
    likeMode: form.likeMode,
    gridShowField: form.gridShowField,
  };
};
